<template>
    <page-view class="flex flex-col">
        <title-bar :show-back="true">登录</title-bar>
        <div class="content-box flex-1 overflow-auto">
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="phone" label="手机号" placeholder="用户名" :rules="[{ validator, message: '请输入正确的手机号' }]"/>
                    <van-field v-model="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]"/>
                </van-cell-group>
                <div class="m-[16px]">
                    <button class="bg-primaryColor text-white border-none w-full h-[35px] rounded-full" type="submit">
                        登录
                    </button>
                </div>
            </van-form>
        </div>
    </page-view>
</template>
<script setup>
import { ref } from "vue";
import titleBar from "../components/title-bar.vue";
const phone=ref();
const password=ref();
const partten = /^[1][3,4,5,7,8][0-9]{9}$/;
const validator=(val)=>{
    if (!partten.test(val)) {
        //手机号输入错误
        return false;
      } else{
        //手机号输入正确
        return true;
      }
}
</script>
<style>
</style>